<script setup lang="ts">
import { logo } from '@/assets/data_image'
import { reactive } from 'vue'
import {
  mdiHomeOutline,
  mdiPlusBoxOutline,
  mdiBellOutline,
  mdiAccountCircleOutline,
  mdiMenu,
  mdiHeartOutline,
  mdiHeart,
} from '@mdi/js'
//@ts-ignore
import shan from '@/assets/img/shan.avif'

const menus = reactive([
  { id: '1', active: true, title: '发现', icon: mdiHomeOutline },
  { id: '2', active: false, title: '发布', icon: mdiPlusBoxOutline },
  { id: '3', active: false, title: '通知', icon: mdiBellOutline },
  { id: '4', active: false, title: '我', icon: mdiAccountCircleOutline },
])

const types = reactive([
  { id: '1', title: '推荐', active: true },
  { id: '2', title: '教育', active: false },
  { id: '3', title: '穿搭', active: false },
  { id: '4', title: '美食', active: false },
  { id: '5', title: '彩妆', active: false },
  { id: '6', title: '影视', active: false },
  { id: '7', title: '职场', active: false },
  { id: '8', title: '情感', active: false },
  { id: '9', title: '家居', active: false },
  { id: '10', title: '游戏', active: false },
  { id: '11', title: '旅行', active: false },
  { id: '12', title: '健身', active: false },
])

const menuClick = (menu) => {
  for (let item of menus) {
    item.active = false
  }
  menu.active = true
}

const typeClick = (type) => {
  for (let item of types) {
    item.active = false
  }
  type.active = true
}

const contents = reactive([])

for (let i = 0; i < 99; i++) {
  let img = shan
  let random = Math.floor(Math.random() * (100 + 1))
  if (random % 2 == 0) {
    img =
      'https://sns-webpic-qc.xhscdn.com/202408271737/5547ab74b6958dffcd2c556a07f1ff4f/1040g008316fn9fsr1e005o7e6j1g98pld30u6vo!nc_n_webp_mw_1'
  }
  contents.push({
    id: '1',
    img: img,
    title: '世界之大，无奇不有',
    username: '李煜',
    userIcon:
      'https://sns-webpic-qc.xhscdn.com/202408271737/3e88496a072ba35255b4f95914a32b13/1040g008316r28tsu44005om95830g7m9lu21juo!nc_n_webp_mw_1',
    favNum: 6666,
  })
}
</script>

<template>
  <div class="h-full flex flex-row justify-center">
    <main class="h-full md:w-10/12 md:grid grid-rows-1 grid-cols-12">
      <section class="flex flex-col justify-between text-lg col-span-2">
        <div class="flex flex-col">
          <img :src="logo" class="pt-8 pb-8" alt="logo" width="68" />

          <ul class="w-full pr-2">
            <li
              v-for="menu in menus"
              @click="menuClick(menu)"
              class="flex flex-row pt-2 pb-2 w-full rounded-2xl cursor-pointer"
              :class="{ 'bg-primary': menu.active }"
            >
              <svg-icon
                type="mdi"
                :path="menu.icon"
                class="pl-2 mr-2"
              ></svg-icon>
              <span>{{ menu.title }}</span>
            </li>
          </ul>
        </div>

        <div class="flex flex-row mb-8">
          <svg-icon type="mdi" :path="mdiMenu" class="mr-2"></svg-icon>
          <span>更多</span>
        </div>
      </section>

      <section class="col-span-10 overflow-y-scroll scroll-hidden">
        <header
          class="glass shadow flex sticky top-0 mb-2 z-10 flex-row justify-center pt-6 pb-6"
        >
          <input
            type="text"
            placeholder="搜索小红书"
            class="input border border-solid border-primary-content w-3/5"
          />

          <p class="w-1/5 flex flex-row justify-end items-center">
            <span>创作中心</span>
            <span class="ml-4">业务合作</span>
          </p>
        </header>

        <ul class="flex flex-row">
          <li
            class="pl-4 pr-4 pt-2 pb-2 rounded-2xl cursor-pointer"
            v-for="type in types"
            @click="typeClick(type)"
            :class="{ 'bg-primary': type.active }"
          >
            {{ type.title }}
          </li>
        </ul>

        <div class="grid grid-cols-5 gap-4 mt-2">
          <div v-for="content in contents" class="shadow card gap-y-2">
            <img :src="content.img" class="w-full h-auto block" alt="配图" />
            <p class="pl-2">{{ content.title }}</p>
            <div class="flex flex-row justify-between p-2">
              <p class="flex flex-row items-center">
                <img
                  class="rounded-xl w-8 h-8"
                  :src="content.userIcon"
                  alt="头像"
                />
                <span>{{ content.username }}</span>
              </p>
              <p class="flex flex-row items-center">
                <svg-icon type="mdi" :path="mdiHeartOutline"></svg-icon>
                <span>{{ content.favNum }}</span>
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped>
.scroll-hidden {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
